@use "scss/colors";
@use "scss/mixins";
@use "scss/variables";
@use "scss/z-indices";

.selectConnector {
  position: relative;
  z-index: z-indices.$base;
  display: grid;

  // The width of the center column includes horizontal page padding on both sides.
  grid-template-columns: 1fr min(100%, calc(variables.$page-width + 2 * variables.$spacing-xl)) 1fr;

  &__header {
    grid-column: 2 / 3;
    padding: variables.$spacing-md variables.$spacing-xl variables.$spacing-md;
    position: sticky;
    top: 0;
    background-color: colors.$backdrop;
    z-index: 1;
  }

  &__gutter {
    background-color: colors.$backdrop;
    position: sticky;
    top: 0;
  }

  &__gutter--left {
    grid-column: 1 / 2;
  }

  &__gutter--right {
    grid-column: 3 / 4;
  }

  &__suggestedConnectors {
    grid-column: 2 / 3;

    &:not(:empty) {
      margin: variables.$spacing-sm 0 variables.$spacing-md;
    }
  }

  &__grid {
    grid-column: 2 / 3;
    padding-inline: variables.$spacing-xl;
    margin-top: calc(
      variables.$spacing-xl - variables.$spacing-md
    ); // When not scrolled, we want xl space between the sticky header and the grid
  }
}
